<template>
	<div>
		<van-nav-bar title="购物车" />

		<div class="car">
			<van-swipe-cell v-for="(item,i) in carList" :key="item._id" :on-close="onClose" tag="div">
				<van-cell :border="false">
					<div class="item">
						<van-checkbox-group v-model="result">
							<van-checkbox :name="item._id" checked-color="#FF734C"></van-checkbox>
						</van-checkbox-group>
						<img :src="item.product.coverImg" />
						<div class="desc">
							<p>{{item.product.descriptions}}</p>
							<van-stepper v-model="numArr[i]" />
							<span class="price">￥ {{item.product.price*numArr[i]}}</span>
						</div>
					</div>
				</van-cell>
				<template slot="right">
					<van-button square type="danger" @click="deleteGood(item._id)" text="删除" />
				</template>
			</van-swipe-cell>
			<p class="iconfont icon-wpicon-shangjiantou" v-if="scrollY" @click="backTop"></p>
		</div>
		<!-- 结算 -->
		<van-submit-bar @submit="toSettle" :price="getTitol*100" button-text="去结算">
			<van-checkbox v-model="checked" checked-color="#FF734C" v-tap="{methods:allclect}">全选</van-checkbox>
		</van-submit-bar>
	</div>
</template>

<script>
	import * as api from '../api/getProlist'
	export default {
		name: "Cart",
		data() {
			return {
				title: "购物车",
				checked: false,
				carList: [],
				// radio: true,
				numArr: [], //每个商品数量
				result: [], //选中的商品id
				show: false,
				titolPrice: 0, //总价,
				objArr: [], //选中的商品
				scrollY: ''
			}
		},
		created() {
			if (this.checked == false) {
				this.result = [];
			} else {
				this.carList.forEach(v => {
					this.result.push(v._id);
				});
			}

		},
		mounted() {
			console.log(this.numArr)
			this.$emit('toparent', this.title)
			window.addEventListener('scroll', this.scrollToTop)
			api.getCartmess().then((data) => {
				console.log(data.data)
				this.carList = data.data
				console.log(this.carList)
				this.$emit("toIndex", this.carList.length)
			});
			this.getlist();
			this.$nextTick(() => {
				this.checked = false;
			});
		},
		destroyed() {
			window.removeEventListener('scroll', this.scrollToTop)
		},
		methods: {
			// 点击回到顶部方法，加计时器是为了过渡顺滑
			backTop() {
				const that = this
				let timer = setInterval(() => {
					let ispeed = Math.floor(-that.scrollTop / 5)
					document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
					if (that.scrollTop === 0) {
						clearInterval(timer)
					}
				}, 16)
			},
			// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
			scrollToTop() {
				const that = this
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				that.scrollTop = scrollTop
				if (that.scrollTop > 200) {
					that.scrollY = true
				} else {
					that.scrollY = false
				}
			},
			//全选
			allclect() {
				this.checked = !this.checked;
				let arr = [];
				if (this.checked == false) {
					this.result = [];
				} else {
					this.carList.forEach(v => {
						arr.push(v._id);
					});
					this.result = arr;
				}
			},

			onClose(clickPosition, instance) {
				switch (clickPosition) {
					case "left":
					case "cell":
					case "outside":
						instance.close();
						break;
					case "right":
						break;
				}
			},
			//删除购物车
			deleteGood(id) {
				this.$dialog
					.confirm({
						message: "确定删除吗？"
					})
					.then(() => {
						api.deleteCart(id).then(data => {
							this.getlist();
							let delobj = this.carList.find(v => v._id == id); //如果选中 从数组中删除

							if (this.objArr.includes(delobj)) {
								let index = this.objArr.findIndex(v => v == delobj);
								this.objArr.splice(index, 1);
							}
							//从购物车数组中删除这个对象
							if (this.carList.includes(delobj)) {
								let index = this.carList.findIndex(v => v == delobj);
								this.carList.splice(index, 1);
							}

							if (this.result.includes(id)) {
								let i = this.result.findIndex(v => v == id);
								this.result.splice(i, 1);
							}
							setTimeout(() => {
								console.log();
							}, 500);
						});
					});
			},
			toSettle() {
				this.$store.commit("getOder", this.objArr);
				this.$toast.loading({
					message: "加载中...",
					forbidClick: true,
					duration: 500
				});
				setTimeout(() => {
					localStorage.setItem("oder", JSON.stringify(this.objArr));
					if (this.objArr.length >= 1) {
						this.$router.push("/settlement");
					} else {
						this.$toast({
							message: "您还没有选择商品哦~",
							duration: 1500
						});
					}
				}, 600);
			},
			getlist() {
				//获取购物车列表
				api.getCartmess().then(data => {
					this.carList = data.data;

					console.log(this.carList.length)
					let arr = [];
					this.carList.forEach(item => {
						arr.push(item.quantity);
					});
					this.numArr = arr; //商品数量数组
					console.log(this.numArr)
					localStorage.setItem("car", JSON.stringify(this.carList));
				});
			}
		},
		computed: {
			getTitol() {
				//总价
				let arr = [];
				let sum = 0;
				this.result.forEach((v, i) => {
					let obj = this.carList.find(item => item._id == v); //选中的商品对象
					arr.push(obj);
				});
				this.objArr = arr;
				this.objArr.forEach(v => {
					if (typeof v == "undefined") {
						return;
					}
					sum += v.product.price * v.quantity;
				});
				return sum;
			}
		},
		watch: {
			result: function(newvalue) {
				if (newvalue.length == this.carList.length) {
					this.checked = true;
				} else {
					this.checked = false;
				}
			},
			carList: function(newvalue) {
				localStorage.setItem("car", JSON.stringify(this.carList));
				// console.log(this.$store.getters.countCar[0].quantity)
			},
			numArr: function(newvalue) {
				//商品数零数组
				// console.log(newvalue);
			}
		}
	}
</script>

<style scoped="">
	.icon-wpicon-shangjiantou {
		font-size: 20px;
		position: fixed;
		bottom: 100px;
		right: 30px;
		color: #fff;
		text-align: center;
		line-height: 30px;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: #666;
		opacity: 0.7;
	}

	.van-nav-bar__title {
		color: #fff;
		font-size: 14px;
	}

	.van-nav-bar {
		height: 46px;
		background: #d46170;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}

	.van-icon,
	.van-icon::before {
		color: #FFF;
		font-size: 12px;
	}

	.van-nav-bar__text {
		color: #fff;
		font-size: #12px;
	}

	.van-submit-bar {
		z-index: 0;
	}

	.van-submit-bar__bar {
		height: 40px;
		margin-bottom: 50px;
	}

	.van-button--danger {
		width: 112px;
		height: 40px;
		background: #d4616e;
		border: 1px solid #d4616e;
		color: #e4cbcf;
		line-height: 40px;
	}

	.van-submit-bar__text {
		font-size: 10px;
		margin-top: -10px;
	}

	.van-submit-bar__price {
		font-size: 11px;
		color: #d991a3;
		margin-left: 8px;
	}

	.van-checkbox {
		margin-left: 9px;
	}

	/* .van-swipe-cell:last-child{
    margin-bottom: 45px;
  } */

	p,
	span,
	li,
	ul,
	h1,
	img,
	a {
		margin: 0;
		padding: 0;
	}

	body {
		height: 100%;
		display: flex;
	}

	.navList {
		position: fixed;
		top: 44px;
		right: 5px;
		width: 85px;
		text-align: center;
		background-color: #fff;
		box-shadow: -1px 1px 3px #ddd;
		font-size: 13px;
		z-index: 9;
	}

	.navList div {
		height: 40px;
		line-height: 40px;
		display: flex;
		padding-left: 10px;
	}

	.navList div span {
		padding: 0 5px;
		font-size: 16px;
	}

	.car-container {
		background-color: #f0f0f0;
		padding-bottom: 20px;
		height: 100%;
		flex: 1;
	}

	.car {
		margin: 46px 0 40px 0;
	}

	.car .item {
		height: 110px;
		background-color: #fff;
		padding: 8px 0 15px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 1px solid #ccc;
	}

	.car .item img {
		width: 100px;
		height: 100px;
		margin-left: 15px;
		margin-right: 15px;
	}

	.car .item .price {
		color: #ff734c;
	}

	.car .desc {
		width: 180px;
		padding-left: 10px;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		font-size: 14px;
	}

	.car .desc p {
		width: 150px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.van-button--danger {
		height: 100%;
		background-color: #d4616e;
		border: 0;
		outline: none;
	}

	.van-button__text {
		color: #fff;
	}

	.van-submit-bar__bar {
		padding-left: 15px;
	}

	.van-submit-bar__bar .van-button {
		background-color: #d4616e;
		border: 0;
		color: #fff;
	}

	.van-submit-bar__price {
		color: #d4616e;
	}

	.van-cell {
		padding: 0;
	}
</style>
